let _Vue = null
export default class VueRouter {
  static install(Vue) {
    //   1 判断当前插件是否已经安装
     if(VueRouter.install.installed){
         return 
     }
     VueRouter.install.installed = true
    //  2 把vue 的构造函数记录到全局变量
     _Vue = Vue
    //  3 把创建Vue实例时候传入的router对象注入到Vue实例上
    //  混入
    _Vue.mixin({
        beforeCreate () {
            // 判断router 对象是否已经挂载了 Vue 实例上个
            if(this.$options.router){
                // 把router 对象注入到Vue实例上
                _Vue.prototype.$router = this.$options.router
                _Vue.prototype.$router.init()
            }
        }
    })
   }
   init(){
       this.createRouteMap()
       this.initComponents(_Vue)
       this.initEvents()
   }
   constructor (options) {
       this.options = options
     // 记录路径和对应的组件
       this.routeMap = {}
       this.data = _Vue.observable({
           // 当前的默认路径
           current: "/"
       })
   }
   createRouteMap () {
    //    遍历路由规则，解析成键值对的形式，存储到routeMap
         this.options.routes.forEach((route)=>{
         this.routeMap[route.path] = route.component
       })
   }
   initComponents (Vue) {
      Vue.component('router-link', {
          props: {
              to: String
          },
          // 需要带编译器版本的 Vue.js 
          // template: "<a :href='\"#\" + to'><slot></slot></a>"
          // 使用运行时版本的 Vue.js
          render(h){
            return h('a', {
                attrs: {
                    href:'#' + this.to
                },
                on: {
                    click: this.clickHandler
                }
            }, [this.$slots.default])
          },
          methods: {
            clickHandler (e) {
                history.pushState({}, "", this.to)
                this.$router.data.current = this.to
                e.preventDefault()
            }
          }
      })
      const self = this
      Vue.component('router-view', {
         render(h) {
           // 根据当前路径找到对应的组件，注意 this 的问题 
            const component = self.routeMap[self.data.current] 
            return h(component)
         }
      })
   }
   initEvents () {
     window.addEventListener("popstate", ()=>{
       this.data.current = window.location.pathname
     })
   }
}